<template>
  <transition name="fade">
    <div class="modal-overlay" v-if="visible" >
      <!--<div class="modal-overlay" v-if="visible" @click.self="close">-->
      <div class="modal" :style="modalStyle">
        <!--<button class="close-btn" @click="close">关闭</button>-->
        <el-button class="close-btn" size="mini" type="danger" @click="close">
          关闭
        </el-button>
        <!--<button class="fullscreen-btn" @click="toggleFullscreen">{{ isFullscreen ? '还原' : '全屏' }}</button>-->
        <video ref="videoPlayer" controls autoplay>
          <source :src="videoUrl" type="video/mp4">
          您的浏览器不支持HTML5视频。
        </video>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    props: ['visible', 'videoUrl'],
    data() {
      return {
        isFullscreen: false,
        modalStyle: {
          width: '1360px',
          height: '768px'
        }
      };
    },
    methods: {
      close() {
        this.$emit('update:visible', false);
      },
      toggleFullscreen() {
        if (this.isFullscreen) {
          // 还原大小
          this.modalStyle.width = '800';
          this.modalStyle.height = '600';
        } else {
          // 设置为全屏
          this.modalStyle.width = '100vw';
          this.modalStyle.height = '100vh';
        }
        this.isFullscreen = !this.isFullscreen;
      }
    }
  };
</script>

<style scoped>
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999999999999999;
  }
  .modal {
    position: relative;
    /*background: white;*/
    padding: 20px;
    /*border-radius: 10px;*/
    /*box-shadow: 0 5px 15px rgba(0,0,0,.5);*/
  }
  .close-btn, .fullscreen-btn {
    /*position: absolute;*/
    /*top: 10px;*/
    /*cursor: pointer;*/
    /*background-color: #fff;*/
    position: relative;
    border: none;
    font-size: 16px;
    padding: 5px 10px;
    float: right;
    margin-bottom: 10px;
  }
  .fullscreen-btn {
    right: 10px;
  }
  .close-btn {
    left: 10px;
  }
  video {
    width: 100%;
    /*height: calc(100% - 50px); !* 减去按钮的高度 *!*/
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>
